<template>
    <div class="exam-info">
      <div v-for="(exam, index) in downloadList" :key="index" class="exam-item">
        <div class="exam-title">{{ exam.name }}</div>
        <div class="exam-actions" @click="handleDownload(exam)">
          <div>下载</div>
            <img src="~@/static/download-icon.png" class="down-load"/>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from 'element-plus'
  defineProps({
    downloadList: {
      type: Array,
      required: true,
      default: () => []
    }
  })
  const handleDownload = (exam) => {
    if (!exam.url) {
      ElMessage.error('文件不存在！')
      return;
    }
    
    // 创建一个隐藏的a标签用于下载
    const downloadLink = document.createElement('a');
    downloadLink.href = exam.url;
    
    // 尝试从URL获取文件名，如果无法获取则使用exam.name
    const fileName = exam.name || '下载文件';
    downloadLink.setAttribute('download', fileName);
    
    // 添加到body，触发点击，然后移除
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }
  </script>
  
  <style lang="scss" scoped>
  .exam-info {
    .exam-item {
      margin-bottom: 20px;
      display:flex;
      align-items:center;
      // gap:20px;
      margin:10px 0px;
      // argin-bottom: 12px;
      cursor: pointer;
    }
    .exam-title {
      color: #333;
      
      font-size: 16px;
      margin-right:20px;
      font-weight:600;
      // m
    }
    .exam-actions{
      display:flex;
      align-items: center;
     div{
      font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;
  margin-right:5px;


  color: #126983;
     }
    }
    .down-load{
        width: 13.34px;
height: 13.06px;


    }
  }
  </style>